<template>
    <div class="expand">
        <div v-for="item in row.book">
            <Row class="expand-row">
                <Col span="8">
                    <span class="expand-key">商品名称: </span>
                    <span class="expand-value">{{ item.bookName }}</span>
                </Col>
                <Col span="8">
                    <span class="expand-key">商品价格: </span>
                    <span class="expand-value">{{ item.price }}</span>
                </Col>
            </Row>
        </div>
        <Row>
            <Col span="8">
                <span class="expand-key">收货地址: </span>
                <span class="expand-value">{{ row.address }}</span>
            </Col>
        </Row>
        <Row>
            <Col span="8">
                <span class="expand-key">商品件数: </span>
                <span class="expand-value">{{ row.goodsNum }}</span>
            </Col>
            <Col span="8">
                <span class="expand-key">商品总价: </span>
                <span class="expand-value">{{ row.totalPrice }}</span>
            </Col>
        </Row>
    </div>
</template>

<script>
  export default {
    props: {
      row: Object
    }
  };
</script>

<style scoped>
    .expand {
        margin-left: 20px;
    }
    .expand-row{
        margin-bottom: 16px;
    }
</style>
